<!--
 * @Descripttion: 
 * @Author: lixx2048@163.com
 * @version: 
 * @Date: 2023-03-25 13:00:00
 * @LastEditors: lixx2048@163.com
 * @LastEditTime: 2023-03-25 13:00:00
-->
<template>
  <div class="role-right-dialog">
    <el-dialog
      :title="titleName"
      width="30%"
      top="10vh"
      center
      :visible.sync="visible"
      :before-close="modalClose"
      @open="modelOpen"
      :close-on-click-modal="false"
      append-to-body>
      <div class="tree" ref="rightTreeScroll" v-loading="loading">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          ref="rightTree"
          highlight-current
          :props="defaultProps"
          :indent="30"
          :default-expanded-keys="openNodeKeys">
        </el-tree>
      </div>
      <div slot="footer">
        <!--
        <el-button type="cancel" @click="modalClose">取 消</el-button>
        -->
        <el-button type="primary" @click="formSubmit" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'clientRightDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modelData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      titleName: '客户权限',
      searchForm: {
        pageIndex: 1,
        pageSize: 9999,
      },
      rightList: [],
      treeData: [],
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      openNodeKeys: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 对话框打开
    modelOpen() {
      this.loadRightList();
    },

    // 加载权限列表&加载角色已有权限
    async loadRightList() {
      this.loading = true;
      try {
        // 加载权限列表
        let rightArr = await this.$api.right.findRightList(this.searchForm);
        this.rightList = rightArr.value;
        // 处理菜单树型结构
        this.treeData = this.rightTree(rightArr.value); 
        // 加载角色已有权限
        let rightKeys = this.handleTreeChecked(this.modelData.authorities);
        // 权限树选中已有权限节点
        this.$refs.rightTree.setCheckedKeys(rightKeys);
        // 设置滚动条
        await this.setScrollTop();
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },

    /**
     * 根据列表生成权限树
     * @param {*} list 
     */
    rightTree(list) {
      var rightTree = [];
      list.forEach(item => {
        let parentRight = {
          module: item.module,
          label: item.moduleName,
          // 全选框状态
          isIndeterminate: false, 
          // 是否全选
          selectAll: false, 
          // 已选择列表
          selected: [], 
          // 选项
          children: [], 
        }
        let childRight = {
          id: item.id,
          app: item.app,
          groups: item.groups,
          name: item.name,
          module: item.module,
          moduleName: item.moduleName,
          label: item.description
        }
        if (rightTree.length > 0) {
          var index = 0;
          let findNode = rightTree.find(node => {
            if (node.module == item.module) {
              return node;
            }
            index++;
          })
          if (!findNode) {
            parentRight['children'].push(childRight);
            rightTree.push(parentRight);
          } else {
            rightTree[index]['children'].push(childRight);
          }
        } else {
          parentRight['children'].push(childRight);
          rightTree.push(parentRight);
        }
      });
      return rightTree;
    },

    // 处理权限树已选节点
    handleTreeChecked(authorities) {
      if(!authorities || authorities === ''){
        return [];
      }
      return authorities.split(',');
    },

    // 表单提交
    formSubmit() {
      this.loading = true;
      try {
        let nodes = this.$refs.rightTree.getCheckedKeys(true, false);
        let arr = [];
        this.rightList.forEach(item => {
          nodes.forEach(id => {
            if(id === item.id) {
              arr.push({
                id: id,
                name: item.name,
                label: item.description
              });
            }
          })
        });
        this.$emit('select', arr);
        this.loading = false;
        this.modalClose();
      } catch (error) {
        this.loading = false;
      }
    },

    // 设置权限树滚动条回到顶部
    setScrollTop() {
      let initialNode = this.$refs.rightTreeScroll;
      let pos = initialNode.scrollTop;
      if (pos > 0) {
        initialNode.scrollTop = 0;
      }
    },

    // 对话框关闭
    modalClose() {
      this.openNodeKeys = [];
      // 直接修改父组件的属性
      this.$emit('update:visible', false);
    },
  },
};
</script>
<style lang="scss">
.role-right-dialog {
  .tree {
    display: flex;
    height: 35rem;
    padding: 1rem;
    overflow-y: scroll;
    .el-tree {
      width: 100%;
      .el-tree-node__label {
        width: auto;
        float: right;
        font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #3e4655;
        line-height: 25px;
        letter-spacing: 1px;
      }
      .el-tree-node__label {
        width: auto;
        float: right;
        font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #3e4655;
        line-height: 25px;
        letter-spacing: 1px;
      }
      .el-tree-node__content {
        height: 34px;
        .el-tree-node__expand-icon {
          font-size: 28px;
        }
        .el-checkbox {
          .el-checkbox__input {
            .el-checkbox__inner {
              width: 20px;
              height: 20px;
            }
            .el-checkbox__inner::after {
              height: 11px;
              left: 6px;
              width: 5px;
            }
            .el-checkbox__inner::before {
              top: 8px;
            }
          }
        }
      }
    }
  }

  /* 一开始隐藏 */
  .tree::-webkit-scrollbar {
    display: none;
  }

  /* 鼠标经过再显示 */
  .tree:hover::-webkit-scrollbar {
    display: block;
    width: 0.375rem;
    background-color: #fff;
    border-radius: 0.625rem;
  }

  .tree::-webkit-scrollbar-thumb {
    background-color: rgba(134, 191, 250, 0.7);
    border-radius: 0.625rem;
  }
}
</style>